<template>
  <div class="home">
    <section ion class="container-main-header">
      <section class="header-left">
        <i class="el-icon-menu"></i>
        <span>首页</span>/
        <span>商品</span>/
        <span>品牌管理</span>
        <i class="el-icon-pear"></i>
      </section>
      <section class="search-Box">
        <section class="search-box">
          <div>
            <i class="el-icon-search"></i>&nbsp;&nbsp;
            <span>筛选搜索</span>
            <el-button type="primary" style="float: right; ">查询结果</el-button>
          </div>
          <div class="miaosha-input">
            <span>输入搜索：</span>
            <el-input placeholder="品牌名称/关键字" v-model="input" clearable style="width:200px"></el-input>
          </div>
        </section>
      </section>
      <!-- 数据列表 -->
      <section class="datalist-box">
        <section class="datalist">
          <section class="datalist-box">
            <i class="el-icon-document"></i>&nbsp;&nbsp;
            <span>数据列表</span>
            <el-button
              class="addactivity"
              style="float: right;padding:6px 14px"
              @click="addBrands"
            >添加</el-button>
          </section>
      </section>
          <!--  -->
          <!-- v-loading="listLoading" -->
      <div class="table-container">
            <el-table ref="multipleTable"
                      :data="tableData.slice((currentPage - 1) * pageSize, 
			                currentPage*pageSize)"
                      border style="width: 100%">
              <el-table-column type="selection" width="60" align="center"></el-table-column>
              <el-table-column prop="id" label="编号" width="100" align="center">
                <!-- <template slot-scope="scope">{{scope.row.id}}</template> -->
              </el-table-column>
              <el-table-column prop="name" label="品牌名称" align="center">
                <!-- <template slot-scope="scope">{{scope.row.name}}</template> -->
              </el-table-column>
              <el-table-column prop="alphabet" label="品牌首字母" width="100" align="center">
                <!-- <template slot-scope="scope">{{scope.row.firstLetter}}</template> -->
              </el-table-column>
              <el-table-column prop="sort" label="排序" width="100" align="center">
                <!-- <template slot-scope="scope">{{scope.row.sort}}</template> -->
              </el-table-column>
              <el-table-column prop="manufacturer" label="品牌制造商" width="100" align="center">
                <!-- <template slot-scope="scope">
                  <el-switch
                    @change="handleFactoryStatusChange(scope.$index, scope.row)"
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.factoryStatus">
                  </el-switch>
                </template> -->
                <template  slot-scope="scope" >
                                <el-switch
                                    v-model="scope.row.value"
                                    active-text=""
                                    inactive-text="">
                                </el-switch>
                            </template>
              </el-table-column>
              <el-table-column label="是否显示" width="100" align="center">
                <!-- <template slot-scope="scope">
                  <el-switch
                    @change="handleShowStatusChange(scope.$index, scope.row)"
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.showStatus">
                  </el-switch>
                </template> -->
                <template  slot-scope="scope" >
                                <el-switch
                                    v-model="scope.row.value2"
                                    active-text=""
                                    inactive-text="">
                                </el-switch>
                            </template>
              </el-table-column>
              <el-table-column label="相关" width="220" align="center">
                <template >
                  <span>商品：</span>
                  <el-button size="mini" type="text">100</el-button>
                  <span>评价：</span>
                  <el-button size="mini" type="text">100 </el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" align="center">
                  <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
              </el-table-column>
          </el-table>
    </div>
    <!-- 批量操作 -->
    <section class="batch-operate-container">
      <el-select
        size="small"
        v-model="operateType" placeholder="批量操作">
        <el-option
          v-for="item in operates"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button
        style="margin-left: 20px"
        class="search-button"
        @click="handleBatchOperate()"
        type="primary"
        size="small">
        确定
      </el-button>
      <!-- 分页器 -->
        <section class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          ></el-pagination>
        </section>
    </section>
          <!--  -->
      </section>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      operateType: '',
      operates: [],
      tableData: [{
          id:'1',
          name:'小米',
          alphabet:'M',
          sort:'500',
          value:true,
          value2:true
        }, {
        id:'2',
          name:'七匹狼',
          alphabet:'L',
          sort:'100',
          value:true,
          value2:true,
        }, {
        id:'3',
          name:'海蘭之家',
          alphabet:'M',
          sort:'50',
          value:false,
          value2:true
        }, {
        id:'4',
          name:' 蘋果',
          alphabet:'M',
          sort:'30',
          value:true,
          value2:false
        }, {
        id:'5',
          name:'三星',
          alphabet:'X',
          sort:'120',
          value2:false,
          value2:true
        }, {
        id:'6',
          name:'阿巴阿巴',
          alphabet:'XLL',
          sort:'500',
          value2:true,
          value2:true
        }, {
        id:'7',
          name:'米拉桑',
          alphabet:'M',
          sort:'56',
          value2:true,
          value2:true
        }],
      currentPage: 1,
					pageSize: 5,
					total: 0, // 总条目数
					multipleSelection: [],
					border: true,
					select: "",
					input: "",
					value1: "",
					border: true,
				};
  },
  methods: {
    handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
            },
    addBrands() {
      this.$router.push({
        path: "addBrands"
      });
    },
    // toggleSelection(rows) {
    //     if (rows) {
    //       rows.forEach(row => {
    //         this.$refs.multipleTable.toggleRowSelection(row);
    //       });
    //     } else {
    //       this.$refs.multipleTable.clearSelection();
    //     }
    //   },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleDelete(index, item){
              // item.level = '耳机'
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                this.tableData.splice(index, 1)
                this.$message({
                        type: 'success',
                        message: '删除成功!'
                });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
          }
    }
};
</script>
<style scoped>
/* .home {
        display: flex;
    }
    .main {
        flex: 1;
    } */
.container-main-header {
  text-align: left;
  /* padding: 0 20px; */
  width: 100%;
  display: flex;
  flex-direction: column;
}
.container-main-header .el-icon-pear {
  float: right;
  line-height: 50px;
  margin-right: 20px;
}
.header-left {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.header-right {
  float: right;
}
.header-left span {
  margin: 5px;
  font-size: 14px;
}
.el-icon-menu {
  margin-right: 20px;
}
.el-icon-pear {
  font-size: 24px;
}
.search-Box {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin: 20px 20px;
  width: 1316px;
  height: 125px;
  padding: 20px;
}
.app-main .miaosha-box .search-Box .search-box,
.datalist-box {
  padding: 20px;
}
/* .miaosha-input {
  height: 32px;
  align-items: center;
  font-size: 14px;
  padding: 10px 60px;
} */
.app-main .miaosha-box .miaosha-input span {
  /* width: 130px; */
  margin-left: 60px;
  font-size: 16px;
}
/* .addactivity span {
  width: 82px;
  height: 12px;
  line-height: 12px;
  font-size: 12px;
} */
.datalist {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  border-radius: 4px;
}
.table-container{
  margin-top:20px;
}

.batch-operate-container{
  margin-top: 20px;
  /* display: Flex; */
}
.goodList {
  margin-top: 20px;
}
.block {
  float: right;
}
</style>
